<template>
<div id="main-box">
    <!--搜索-->
    <div class="title">
        <van-row>
            <van-col span="2" offset="2">
                <van-icon name="arrow-left" style="margin-top:10px" @click="back()" />
            </van-col>
            <van-col span="18" offset="1" > <van-search
                    show-action
                    placeholder="请输入搜索关键词"
                    @search="onSearch"
                    v-model="keys"
            >
                <template #action>
                    <div @click="onSearch(keys)">搜索</div>
                </template>
            </van-search></van-col>
        </van-row>
    </div>
    <!--搜索历史-->
    <div class="history" style="margin-left:10px">
    <div class="title">
        <div class="font-guess">搜索历史</div>
    </div>
    <div class="tag" style="margin-top:10px;height:60px">
        <div class="item-tag">
        <van-row type="flex" justify="space-around">
            <template v-for="(item,i) in seachInfo.slice(0,6)">
                <van-tag round type="default" @click="tagSearch(item.name)" :key="i">{{item.name}}</van-tag>
            </template>
        </van-row>
        </div>
        <div class="tag-show" v-show="tagShow">
            <div style="font-size:14px;color: red">登录后可显示</div>
        </div>
        <div class="item-tag" style="margin-top:10px">
        <van-row type="flex" justify="space-around">
            <template v-for="(item,i) in seachInfo.slice(6,12)">
                <van-tag round type="default" :key="i">{{item.name}}</van-tag>
            </template>
        </van-row>
        </div>
    </div>
</div>
    <div class="font-guess" style="margin-left:10px">搜索发现</div>
    <!--热门搜索-->
    <div class="hot-search" style="margin-left:10px;margin-top:10px">
                <div class="title">
            <label>热门搜索</label>
                </div>
            <div class="content">
                <template v-for="(item,i) in hotInfo">
            <van-notice-bar color="#1989fa" @click="barSearch(item.name)" :key="i">
               {{item.title}}
            </van-notice-bar>
                </template>
        </div>
            </div>
</div>
</template>

<script>
    import {getSeachGoods,getHistroy, getHot,putSeachHistroy} from "@/api/api";
    import {Toast} from "vant";

    export default {
        name: "searchDetail",
        data() {
            return {
                seachInfo:[],
                hotInfo:[],
                goodsInfo:[],
                keys:"",
                 token:"",
                tagShow:false
            }
        },
        created() {
            this.token= localStorage.getItem("token");
            if (this.token==="null" || this.token=== '' || this.token===undefined||this.token===null){
                this.tagShow=true
            }else
            {
                this.tagShow=false
                getHistroy().then((response) => {
                    if(response.data.code===2000) {
                        this.seachInfo = response.data.data.historyList;
                    }else{
                        Toast(response.data.message);
                    }
                })

            }

            getHot().then((response)=>{
                if(response.data.code===2000) {
                    this.hotInfo = response.data.data.goodList.records;
                }else {
                    Toast(response.data.message);
                }
            })
        },
        methods:{
            barSearch(name){
                getSeachGoods(name).then((response)=>{
                    this.goodsInfo=response.data.data.goodList;
                    this.$router.push(
                        {path:'/searchGoodsDetail',
                            query:{
                                goods:this.goodsInfo
                            }
                        })
                })

            },
            tagSearch(name){
                getSeachGoods(name).then((response)=>{
                    this.goodsInfo=response.data.data.goodList;
                    this.$router.push(
                        {path:'/searchGoodsDetail',
                            query:{
                                goods:this.goodsInfo
                            }
                        })
                })
            },
            onSearch(){
                getSeachGoods(this.keys).then((response)=>{
                    this.goodsInfo=response.data.data.goodList;
                    this.$router.push(
                        {path:'/searchGoodsDetail',
                            query:{
                                goods:this.goodsInfo
                            }
                        })
                })
                putSeachHistroy(this.keys).then((response)=>{
                  if(response.data.code !== 2000){
                    Toast(response.data.message)
                  }
                })

            },
            back(){
                this.$router.push({path:'/dashboard/home'})
            },
        }
    }
</script>

<style scoped>
#main-box{
    height:100%;
    background-color: white;
}
.font-guess{
    color:black; /*设置文字颜色*/
    font-size:16px; /*设置字体大小*/
    font-weight:bolder; /*设置字体粗细*/
}

</style>